<template>
  <page-loading :show="showPage">
    <view class="edit-group-name" v-if="res">
      <view class="top flex flex-dir-c flex-ai-c flex-jc-c">
        <text class="title">修改群聊名称</text>
        <text class="desc">修改群聊名称后，将在群内通知其他成员。</text>
      </view>
      
      <!-- 修改框 -->
      <view class="edit-box flex flex-ai-c">
        <image class="avatar" :src="res.groupProfile.avatar"></image>
        <view class="input">
          <u-input v-model="value" type="text" height="60rpx" />
        </view>
      </view>
      
      <view class="edit-btn-box flex flex-jc-fe">
        <view class="btn flex flex-ai-c flex-jc-c" :class="{disabled: !btnStatus}" @click="onSubmit"><text>完成</text></view>
      </view>
    </view>
  </page-loading>
</template>

<script>
import timLogin from '@/utils/timLogin.js' // 导入tim 登录
export default{
  data() {
    return {
      value: '',
      oldValue: '',
      groupId: '',
      res: null,
      showPage: false
    }
  },
  computed: {
    btnStatus() {
      return this.value && this.value !== this.oldValue
    }
  },
  onLoad(option) {
    let name = option.name ? decodeURIComponent(option.name) : ''
    this.groupId = option.id || ''
    this.value = name
    this.oldValue = name
    // 登录tim
    if(!this.$store.state.isSDKReady) {
      timLogin(() => {
        this.getGroupInfo()
      })
    } else {
      this.getGroupInfo()
    }
  },
  methods: {
    // 获取群信息
    getGroupInfo(){
      this.tim.getConversationProfile(`GROUP${this.groupId}`).then(imResponse => {
        this.res = imResponse.data.conversation
        this.showPage = true
      }).catch(imError => {
      })
    },
    // 点击完成修改
    onSubmit() {
      if(!this.btnStatus) return false
      if(this.value === '') {
        uni.showToast({
          icon: 'none',
          title: '群名称不能为空'
        })
        return false
      }
      uni.showLoading({
        title: '加载中'
      })
      this.tim.updateGroupProfile({
        groupID: this.groupId,
        name: this.value,
      }).then(imResponse => {
        uni.hideLoading()
        this.oldValue = this.value
        this.$api.chat.EditGroupName({
          iM_Group_Id: this.groupId,
          group_Name: this.value,
        }).then(data => {
          
        }).catch(err => {})
        
        uni.showToast({
          icon: 'none',
          title: '修改成功'
        })
      }).catch(imError => {
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '修改失败'
        })
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #fff;
}
.edit-group-name{
  overflow: hidden;
  .top{
    margin-top: 60rpx;
    .title{
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
    .desc{
      font-size: 30rpx;
      color: #666;
      margin-top: 30rpx;
    }
  }
  .edit-box{
    margin: 50rpx 32rpx 0;
    border-top: 2rpx solid #f6f6f6;
    border-bottom: 2rpx solid #f6f6f6;
    padding: 32rpx 16rpx;
    .avatar{
      width: 96rpx;
      height: 96rpx;
      border-radius: 96rpx;
    }
    .input{
      margin-left: 20rpx;
      flex: 1;
    }
  }
  .edit-btn-box{
    padding: 66rpx 48rpx;
    .btn{
      width: 140rpx;
      height: 54rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 27rpx;
      font-size: 26rpx;
      color: #333;
      &.disabled{
        background: #D0D0D0;
      }
    }
  }
}
</style>
